<template>
  <div>
    <!-- 盒子将来echarts展示图形图标的节点 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { usetravelStore } from '../../../stores/travel'
import type {hotcity} from '@/api/travel/type'
let travelStore = usetravelStore()

// 初始化两个空数组来存储name和value
const names = ref<string[]>([])
const values = ref<number[]>([])

onMounted(() => {
  setTimeout(() => {
    // 使用数组的forEach方法遍历对象数组
    travelStore.traveldata?.hotcity.slice(0,10).forEach((obj: hotcity) => {
      // 将name和value分别添加到对应的数组中
      names.value.push(obj.name)
      values.value.push(obj.value)
    })
    initmap()
  }, 500)
})
//获取节点
let charts = ref()
const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    title: {
      text: '全国热门旅游城市top15',
      textStyle: {
        color: '#eee'
      }
    },
    grid: {
      left: '5%',
      right: '0%',
      bottom: '0%',
      containLabel: true,
    },
    dataZoom:[
      {
          type:"inside",//slider表示有滑动块的，
          show:true,
          yAxisIndex:[0],//表示x轴折叠
          start:1,//数据窗口范围的起始百分比,表示1%
          end:100,//数据窗口范围的结束百分比,表示35%坐标
          // zoomOnMouseWheel:true,
          moveOnMouseMove:true,
      },
      {
          type:"inside",//slider表示有滑动块的，
          show:true,
          yAxisIndex:[0],//表示x轴折叠
          start:1,//数据窗口范围的起始百分比,表示1%
          end:100,//数据窗口范围的结束百分比,表示35%坐标
          // zoomOnMouseWheel:true,
          moveOnMouseMove:true,
      },
  ],


    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params:any) {

        // 使用模板字符串来拼接提示框的内容
        let str = `
      <div>点击可查看详细信息！</div>
      <div>${params[0].name} <br/>${params[0].value}去过！</div>

    `
        return str
      }
    },
    legend: {},
    
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      splitLine: {
        show: true // 不显示网格线
      },
     

    },
    yAxis: {
      show: true,
      // inverse: true,
      axisTick: {
        show: false // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false // 不显示坐标轴线
      },
      axisLabel: {
        show: true // 不显示坐标轴上的文字
      },
      type: 'category',
      data: names.value
    },
    series: [
      {
        type: 'bar',
        // barWidth: auto, // 柱子宽度
        label: {
          show: true,
          position: 'inside', // 位置
          color: '#eee',
          // fontSize: 9,
          distance: 10, // 距离
          formatter: '{c}人次' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        data: values.value,

        itemStyle: {
          normal: {
            barBorderRadius: [20, 20, 20, 20],
            // barBorderRadius: 0,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: '#FDC830' //  0%  处的颜色quanmei
                },
                {
                  offset: 0.294,
                  color: '#F37335' //  100%  处的颜色quanmei
                },
                {
                  offset: 1,
                  color: '#00BEFF' //  100%  处的颜色quanmei
                }
              ],
              global: false //  缺省为  false quanmei
            }
          }
        }
      }
    ]
  })

  mycharts.on('click', function (params) {
    console.log(params)
    // 使用数组的forEach方法遍历对象数组
    travelStore.traveldata?.hotcity.forEach((obj: hotcity) => {
      if (params.name === obj.name) {
        window.open(obj.link, '_blank') // '_blank' 表示在新标签页中打开
        return
      }
    })
  })
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 300px;
  color: #000;
  /* background-color: aliceblue; */
}
</style>
